<canvas id="cv" width="800" height="600" style="border: solid 1px #000000;position:absolute;top:0px;left:0px;">
</canvas>
<span style="width:800px;display:inline-block;"></span>
<textarea id="out" style="width:200px;height:600px;">
</textarea><br/>
<img src="turtle-icon.png" id="icon">
<textarea id="txt" style="width:800px;height:200px;">

</textarea>
<input style="font-size:100;position: relative; top: -91px;" type="button" value="开始" onclick="start()">
<div>
<table border=1>
	<tr>
		<td>fd(100);</td>
		<td>bk(100);</td>
		<td>rt(45);</td>
		<td>lt(45);</td>
		<td>pu();</td>
		<td>pd();</td>
		<td>st();</td>
		<td>ht();</td>
	</tr>
	<tr>
		<td>cs();</td>
		<td>print(123);</td>
		<td>for(var i=0;i<10;i++){}</td>
		<td>var n = 1;</td>
		<td val="
cs();
lt(180+18);
for(var i=0;i<5;i++){
	fd(100);
	rt(144);
}
">五角星</td>
		<td val="
cs();
lt(180+18);
for(var i=0;i<5;i++){
	fd(50);
	lt(72);
	fd(50);
	rt(144);
}
">空心五角星</td>
		<td val="
for(i=2;i<100;i++){
	var pass = false;
	for(j=2;j<i;j++){
		if(i%j==0){
			pass = true;
		}
	}
	if(!pass){
		print(i);
	}
}
">素数</td>
	</tr>
</table>
<!--
if(n==1){<br/>
	rt(10);<br/>
}else{<br/>
	lt(10);<br/>
}<br/>-->

</div>
<script>
var PI = 3.1415926;
var ZEROX = 800/2;
var ZEROY = 600/2;

var posx=0.0;
var posy=0.0;
var dir=90.0;
var penDown = true;
var showTurtle = true;

var icon = document.getElementById("icon");
var canvas=document.getElementById("cv");
var context=canvas.getContext('2d');
var txt=document.getElementById("txt");
var out=document.getElementById("out");

var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
	var item = tds[i];
	(
		(item)=>{
			item.style="cursor:pointer;padding:5px;";
			item.onclick=()=>{
				var text = txt.value;
				var a = text.substring(0,txt.selectionStart);
				var b = text.substring(txt.selectionEnd);
				if(item.attributes["val"]){
					txt.value = item.attributes["val"].value;
				}else{
					txt.value = a+item.innerText+b;
				}
			};
		}
	)(item);
};

context.strokeStyle ='black';
context.lineWidth = 1;

function setIcon(){
	var x=posx+ZEROX-12;
	var y=-posy+ZEROY-12;
	var deg = dir + 180;
	icon.style="display:"+(showTurtle?"block":"none")+";position:absolute;top:"+y+"px;left:"+x+"px;transform:rotate("+deg+"deg);";
}

setIcon();

function go(len, fd){
	altx = -Math.cos(dir/360.0*PI*2)*len;
	alty = Math.sin(dir/360.0*PI*2)*len;
	if(penDown){
		context.beginPath();
		context.moveTo(posx+ZEROX, -posy+ZEROY);
	}
	if(fd){
		posx+=altx;
		posy+=alty;
	}else{
		posx-=altx;
		posy-=alty;
	}
	if(penDown){
		context.lineTo(posx+ZEROX, -posy+ZEROY);
		context.stroke();
	}
	setIcon();
}

function fd(len){
	go(len, true);
}
function bk(len){
	go(len, false);
}
function lt(val){
	dir-=val;
	setIcon();
}
function rt(val){
	dir+=val;
	setIcon();
}
function cs(){
	posx=0.0;
    posy=0.0;
    dir=90.0;
    penDown = true;
	context.clearRect(0,0,800,600);
	setIcon();
}
function pu(){
	penDown = false;
}
function pd(){
	penDown = true;
}
function ht(){
	showTurtle = false;
	setIcon();
}
function st(){
	showTurtle = true;
	setIcon();
}
//setwidth 
//pos
//color

function start(){
	try{
		eval(txt.value);
	}catch(e){
		console.log(e);
	}
}

function print(val){
	out.value += val+"\r\n";
}
txt.addEventListener('keydown', function(e){
    if(e.keyCode == 9){
        e.preventDefault();
        var indent = '\t';
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var selected = window.getSelection().toString();
        selected = indent + selected.replace(/\n/g, '\n' + indent);
        this.value = this.value.substring(0,start) + selected + this.value.substring(end);
        this.setSelectionRange(start+indent.length,start+selected.length);
    }
})
</script>

